<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>布局容器 | 优医问诊H5</title>
    <meta name="description" content="最新Vue3技术栈,Vue3,TS,Pinia,Vant,在线问诊项目,H5">
    <link rel="preload stylesheet" href="/hm-docs/assets/style.f60a3f91.css" as="style">
    <script type="module" src="/hm-docs/assets/app.5c44d29a.js"></script>
    <link rel="preload" href="/hm-docs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
  <link rel="modulepreload" href="/hm-docs/assets/chunks/framework.956eca13.js">
  <link rel="modulepreload" href="/hm-docs/assets/chunks/theme.bb7bd755.js">
  <link rel="modulepreload" href="/hm-docs/assets/geek-park_03-布局容器.md.f9a95023.lean.js">
  <link rel="icon" type="image/svg+xml" href="./logo2.png">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
  <script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-99cf8a88><!--[--><!--]--><!--[--><span tabindex="-1" data-v-ae3e3f51></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-ae3e3f51> Skip to content </a><!--]--><!----><header class="VPNav" data-v-99cf8a88 data-v-7e5bc4a5><div class="VPNavBar" data-v-7e5bc4a5 data-v-381568bf><div class="container" data-v-381568bf><div class="title" data-v-381568bf><div class="VPNavBarTitle" data-v-381568bf data-v-305adf00><a class="title" href="/hm-docs/" data-v-305adf00><!--[--><!--]--><!--[--><img class="VPImage logo" src="/hm-docs/logo2.png" alt data-v-6db2186b><!--]--><!--[-->优医问诊H5<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-381568bf><div class="curtain" data-v-381568bf></div><div class="content-body" data-v-381568bf><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-381568bf><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-381568bf data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/vue2/base.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->vue2<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/vue2/vuex.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->vuex<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/interview/%E9%9D%A2%E7%BB%8FH5%E7%AB%AF01.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->面经<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/hr/Day01-%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D%E5%8F%8A%E5%88%9D%E5%A7%8B%E5%8C%96-%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->人资<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/hmzs/%E5%89%8D%E5%8F%B0%E5%8F%AF%E8%A7%86%E5%8C%96/01-%E9%A1%B9%E7%9B%AE%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->黑马智数<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/mini-rabbit/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->小兔鲜儿<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/ts/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->TypeScript<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/vue3/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->Vue3<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/pinia/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->Pinia<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/project/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->优医问诊<!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/hm-docs/other-resource/" tabindex="0" data-v-7f418b0f data-v-5e623618><!--[-->其它<!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-381568bf data-v-f6a63727><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-f6a63727 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-381568bf data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink" href="https://gitee.com/luckybo0027" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-36371990><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-381568bf data-v-40855f84 data-v-764effdf><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-764effdf><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-764effdf><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-764effdf><div class="VPMenu" data-v-764effdf data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-40855f84><div class="item appearance" data-v-40855f84><p class="label" data-v-40855f84>Appearance</p><div class="appearance-action" data-v-40855f84><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-40855f84 data-v-82b282f1 data-v-f3c41672><span class="check" data-v-f3c41672><span class="icon" data-v-f3c41672><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-82b282f1><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-82b282f1><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-40855f84><div class="item social-links" data-v-40855f84><div class="VPSocialLinks social-links-list" data-v-40855f84 data-v-7bc22406><!--[--><a class="VPSocialLink" href="https://gitee.com/luckybo0027" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-36371990><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-381568bf data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><!----></header><!----><!----><div class="VPContent" id="VPContent" data-v-99cf8a88 data-v-97b5189c><div class="VPDoc has-aside" data-v-97b5189c data-v-e9631fd0><!--[--><!--]--><div class="container" data-v-e9631fd0><div class="aside" data-v-e9631fd0><div class="aside-curtain" data-v-e9631fd0></div><div class="aside-container" data-v-e9631fd0><div class="aside-content" data-v-e9631fd0><div class="VPDocAside" data-v-e9631fd0 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-3f215769 data-v-ff0f39c8><div class="content" data-v-ff0f39c8><div class="outline-marker" data-v-ff0f39c8></div><div class="outline-title" data-v-ff0f39c8>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-ff0f39c8><span class="visually-hidden" id="doc-outline-aria-label" data-v-ff0f39c8> Table of Contents for current page </span><ul class="root" data-v-ff0f39c8 data-v-b0ff2abe><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e9631fd0><div class="content-container" data-v-e9631fd0><!--[--><!--]--><!----><main class="main" data-v-e9631fd0><div style="position:relative;" class="vp-doc _hm-docs_geek-park_03-%E5%B8%83%E5%B1%80%E5%AE%B9%E5%99%A8" data-v-e9631fd0><div><h1 id="布局容器" tabindex="-1">布局容器 <a class="header-anchor" href="#布局容器" aria-label="Permalink to &quot;布局容器&quot;">​</a></h1><h2 id="效果预览" tabindex="-1">效果预览 <a class="header-anchor" href="#效果预览" aria-label="Permalink to &quot;效果预览&quot;">​</a></h2><img src="/hm-docs/assets/image-20210830181305183.0985d0a1.png" alt="image-20210830181305183" style="zoom:40%;"><h2 id="tabbar-组件基本使用" tabindex="-1"><code>TabBar</code> 组件基本使用 <a class="header-anchor" href="#tabbar-组件基本使用" aria-label="Permalink to &quot;`TabBar` 组件基本使用&quot;">​</a></h2><p>组件库文档：<a href="https://antd-mobile.gitee.io/components/tab-bar" target="_blank" rel="noreferrer">https://antd-mobile.gitee.io/components/tab-bar</a></p><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">TabBar</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">TabBar.Item</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">key</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">icon</span><span style="color:#89DDFF;">={&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_home</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;} </span><span style="color:#C792EA;">title</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">首页</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">TabBar.Item</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">key</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">icon</span><span style="color:#89DDFF;">={&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_qa</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;} </span><span style="color:#C792EA;">title</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">问答</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">TabBar.Item</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">key</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">3</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">icon</span><span style="color:#89DDFF;">={&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_video</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;} </span><span style="color:#C792EA;">title</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">视频</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">TabBar.Item</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">key</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">4</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">icon</span><span style="color:#89DDFF;">={&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_mine</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;} </span><span style="color:#C792EA;">title</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">我的</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#FFCB6B;">TabBar</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="tabbar图标高亮效果" tabindex="-1"><code>TabBar</code>图标高亮效果 <a class="header-anchor" href="#tabbar图标高亮效果" aria-label="Permalink to &quot;`TabBar`图标高亮效果&quot;">​</a></h2><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">TabBar</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">TabBar.Item</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">key</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">icon</span><span style="color:#89DDFF;">={(</span><span style="color:#A6ACCD;font-style:italic;">active</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> (</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">active </span><span style="color:#89DDFF;">?</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_home_sel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_home</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">} /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    )</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">title</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">首页</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">  /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">TabBar.Item</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">key</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">2</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">icon</span><span style="color:#89DDFF;">={(</span><span style="color:#A6ACCD;font-style:italic;">active</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> (</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">active </span><span style="color:#89DDFF;">?</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_qa_sel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_qa</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">} /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    )</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">title</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">问答</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">  /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">TabBar.Item</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">key</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">3</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">icon</span><span style="color:#89DDFF;">={(</span><span style="color:#A6ACCD;font-style:italic;">active</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> (</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">active </span><span style="color:#89DDFF;">?</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_video_sel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_video</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">} /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    )</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">title</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">视频</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">  /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">TabBar.Item</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">key</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">4</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">icon</span><span style="color:#89DDFF;">={(</span><span style="color:#A6ACCD;font-style:italic;">active</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> (</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">active </span><span style="color:#89DDFF;">?</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_mine_sel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_mine</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">} /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    )</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">title</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">我的</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">  /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#FFCB6B;">TabBar</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br></div></div><h2 id="定制组件库主题" tabindex="-1">定制组件库主题 <a class="header-anchor" href="#定制组件库主题" aria-label="Permalink to &quot;定制组件库主题&quot;">​</a></h2><blockquote><p>目标：项目开发定制自己的主题色。</p></blockquote><p>官方文档：<a href="https://antd-mobile.gitee.io/zh/guide/theme" target="_blank" rel="noreferrer">https://antd-mobile.gitee.io/zh/guide/theme</a></p><ul><li>通过审查元素，可以看到 <code>antd-mobile</code> 组件库样式源码中有以下主题色变量定义。</li></ul><img src="/hm-docs/assets/image-20211122154822210.34afae51.png" alt="image-20210830181305183" style="zoom:60%;"><h3 id="修改组件库主题色" tabindex="-1">修改组件库主题色 <a class="header-anchor" href="#修改组件库主题色" aria-label="Permalink to &quot;修改组件库主题色&quot;">​</a></h3><ul><li>修改样式文件：<code>src\assets\styles\index.scss</code></li></ul><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">// 全局修改antd-mobile默认的主题色</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">:root:root {</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  // 修改组件库主色</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  --adm-color-primary: #fc6627;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;"> // 局部修改antd-mobile的主题色 -相当于限制在某个类名之下</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">.geek-color {</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  --adm-color-primary: #fc6627;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul><li>在页面中测试：</li></ul><div class="language-tsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">tsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">color</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">primary</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">按钮主色</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#FFCB6B;">Button</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul><li><p>常见疑问：为什么要写两个重复的 <code>:root</code>？</p><p>由于 <code>antd-mobile</code> 中的主题变量也是在 <code>:root</code> 下声明的，所以在有些情况下会由于优先级的问题无法成功覆盖。</p><p>通过 <code>:root:root</code> 可以显式地让你所写内容的优先级更高一些，从而确保主题变量的成功覆盖。</p></li></ul><h3 id="补充-css3-变量语法" tabindex="-1">补充：<code>CSS3</code> 变量语法 <a class="header-anchor" href="#补充-css3-变量语法" aria-label="Permalink to &quot;补充：`CSS3` 变量语法&quot;">​</a></h3><blockquote><p>目标：学习 <code>CSS3</code> 变量的定义和使用。</p><p>补充：<code>:root</code> 表示根标签，在浏览器环境中就是 <code>html</code> 标签。</p></blockquote><div class="language-scss line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 定义 CSS3 变量：</span></span>
<span class="line"><span style="color:#89DDFF;">:</span><span style="color:#C792EA;">root</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  --变量名</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> 值</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">  --color-primary</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> pink</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 使用 CSS3 变量：</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">选择器</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  样式属性</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">var</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">--变量名</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">background-color</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">var</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">--color-primary</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><p>🔔 注意：<code>CSS3</code> 变量有作用域，根标签定义的变量可以全局使用。</p><h2 id="布局容器底部-tabbar" tabindex="-1">布局容器底部 <code>TabBar</code> <a class="header-anchor" href="#布局容器底部-tabbar" aria-label="Permalink to &quot;布局容器底部 `TabBar`&quot;">​</a></h2><blockquote><p>目标：实现一个带有底部 tab 导航栏的页面布局容器组件，当点击底部按钮后，可切换显示不同内容</p></blockquote><p>实现思路：</p><ul><li>定义一个数组来存放 <code>TabBar</code> 相关数据，通过遍历渲染 <code>TabBar</code> 子项，方便统一管理。</li><li>点击 <code>TabBar</code> 按钮后，需要实现路由地址切换。</li><li>根据路由地址，高亮对应的 <code>TabBar</code> 子项。</li></ul><p><strong>操作步骤</strong></p><ul><li>修改基本结构：<code>src\pages\Layout\index.tsx</code></li></ul><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> styles </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./index.module.scss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Icon </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@/components/Icon</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">TabBar</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">antd-mobile</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Layout</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">  </span><span style="color:#676E95;font-style:italic;">// 定义一个代表  `tabBar` 的数组，用于动态渲染 `TabBar` 子项</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">tabs</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> [</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      key</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">/home</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">      title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">首页</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#82AAFF;">icon</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">active</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">active</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_home_sel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#F07178;">        ) </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_home</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#F07178;">        )</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      key</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">/qa</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">      title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">问答</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#82AAFF;">icon</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">active</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">active</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_qa_sel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_qa</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;,</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      key</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">/video</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">      title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">视频</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#82AAFF;">icon</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">active</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">active</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_video_sel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#F07178;">        ) </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_video</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#F07178;">        )</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">      key</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">/profile</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">      title</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">我的</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">      </span><span style="color:#82AAFF;">icon</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">active</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span></span>
<span class="line"><span style="color:#F07178;">        </span><span style="color:#A6ACCD;">active</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_mine_sel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#F07178;">        ) </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Icon</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iconbtn_mine</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#F07178;">        )</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#F07178;">  ]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">className</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">styles</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">root</span><span style="color:#89DDFF;">}&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">{</span><span style="color:#676E95;font-style:italic;">/* 区域一：点击按钮切换显示内容的区域 */</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">className</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">tab-content</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h3</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">内容</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h3</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">{</span><span style="color:#676E95;font-style:italic;">/* 区域二：按钮区域，会使用固定定位显示在页面底部 */</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">TabBar</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">className</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">geek-tabbar</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;">tabs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">map</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">item</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> (</span></span>
<span class="line"><span style="color:#A6ACCD;">          </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">TabBar.Item</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">key</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">key</span><span style="color:#89DDFF;">} </span><span style="color:#C792EA;">icon</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">icon</span><span style="color:#89DDFF;">} </span><span style="color:#C792EA;">title</span><span style="color:#89DDFF;">={</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">title</span><span style="color:#89DDFF;">} /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        ))</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#FFCB6B;">TabBar</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;">  )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br></div></div><ul><li>新建样式文件：<code>src\pages\Layout\index.module.scss</code></li></ul><div class="language-scss line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">@import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@/assets/styles/hairline.scss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">root</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100vh</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  </span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;">global {</span></span>
<span class="line"><span style="color:#A6ACCD;">    .tab-content {</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">height</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">100vh</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">geek-tabbar</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">position</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> fixed</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">z-index</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">bottom</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">left</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#B2CCD6;">right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;font-style:italic;">@include</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">hairline</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">top, </span><span style="color:#89DDFF;">#</span><span style="color:#A6ACCD;">ddd</span><span style="color:#89DDFF;">);</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">  }</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><ul><li>修改文件：<code>src\pages\Layout\index.tsx</code></li></ul><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">import styles from &#39;./index.module.scss&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">import Icon from &#39;@/components/Icon&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">import { TabBar } from &#39;antd-mobile&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import { useNavigate } from &quot;react-router-dom&quot;;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">export default function Layout() {</span></span>
<span class="line"><span style="color:#A6ACCD;">  const tabs = [</span></span>
<span class="line"><span style="color:#A6ACCD;">    {</span></span>
<span class="line"><span style="color:#A6ACCD;">      key: &#39;/layout/home&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">      title: &#39;首页&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">      icon: (active: boolean) =&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        active ? &lt;Icon type=&#39;iconbtn_home_sel&#39; /&gt; : &lt;Icon type=&#39;iconbtn_home&#39; /&gt;,</span></span>
<span class="line"><span style="color:#A6ACCD;">    },</span></span>
<span class="line"><span style="color:#A6ACCD;">    {</span></span>
<span class="line"><span style="color:#A6ACCD;">      key: &#39;/layout/qa&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">      title: &#39;问答&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">      icon: (active: boolean) =&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        active ? &lt;Icon type=&#39;iconbtn_qa_sel&#39; /&gt; : &lt;Icon type=&#39;iconbtn_qa&#39; /&gt;,</span></span>
<span class="line"><span style="color:#A6ACCD;">    },</span></span>
<span class="line"><span style="color:#A6ACCD;">    {</span></span>
<span class="line"><span style="color:#A6ACCD;">      key: &#39;/layout/video&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">      title: &#39;视频&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">      icon: (active: boolean) =&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        active ? &lt;Icon type=&#39;iconbtn_video_sel&#39; /&gt; : &lt;Icon type=&#39;iconbtn_video&#39; /&gt;,</span></span>
<span class="line"><span style="color:#A6ACCD;">    },</span></span>
<span class="line"><span style="color:#A6ACCD;">    {</span></span>
<span class="line"><span style="color:#A6ACCD;">      key: &#39;/layout/profile&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">      title: &#39;我的&#39;,</span></span>
<span class="line"><span style="color:#A6ACCD;">      icon: (active: boolean) =&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        active ? &lt;Icon type=&#39;iconbtn_mine_sel&#39; /&gt; : &lt;Icon type=&#39;iconbtn_mine&#39; /&gt;,</span></span>
<span class="line"><span style="color:#A6ACCD;">    },</span></span>
<span class="line"><span style="color:#A6ACCD;">  ]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  const navigate = useNavigate()</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  const { pathname } = useLocation();</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  return (</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;div className={styles.root}&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      {/* 区域一：点击按钮切换显示内容的区域 */}</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;div className=&#39;tab-content&#39;&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        内容</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      {/* 区域二：按钮区域，会使用固定定位显示在页面底部 */}</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      &lt;TabBar</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">        className=&#39;geek-tabbar&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">        activeKey={pathname}</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">        onChange={(key) =&gt; navigate(key)}</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      &gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">        {tabs.map((item) =&gt; (</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">          &lt;TabBar.Item key={item.key} icon={item.icon} title={item.title} /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">        ))}</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      &lt;/TabBar&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;/div&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">  )</span></span>
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br></div></div><h1 id="页面路由配置" tabindex="-1">页面路由配置 <a class="header-anchor" href="#页面路由配置" aria-label="Permalink to &quot;页面路由配置&quot;">​</a></h1><h2 id="效果预览-1" tabindex="-1">效果预览 <a class="header-anchor" href="#效果预览-1" aria-label="Permalink to &quot;效果预览&quot;">​</a></h2><img src="/hm-docs/assets/image-20210831161825392.d1455c68.png" alt="image-20210831161825392" style="zoom:40%;"><h2 id="嵌套路由配置" tabindex="-1">嵌套路由配置 <a class="header-anchor" href="#嵌套路由配置" aria-label="Permalink to &quot;嵌套路由配置&quot;">​</a></h2><blockquote><p>目标：创建 4 个页面并配置路由，使 <code>TabBar</code> 点击后能显示对应页面。</p></blockquote><p><strong>操作步骤</strong></p><ol><li>创建四个页面组件：</li></ol><div class="language-markdown line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">markdown</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> 首页：src/pages/Home/index.tsx</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> 问答：src/pages/QA/index.tsx</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> 视频：src/pages/Video/index.tsx</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> 我的：src/pages/Profile/index.tsx</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>当前，这些组件的代码使用最简单的即可，如：</p><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Home</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h3</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Home</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h3</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;">  )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">QA</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h3</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">QA</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h3</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;">  )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Video</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h3</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Video</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h3</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;">  )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Profile</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">h3</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">Profile</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">h3</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;">  )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="2"><li>在 <code>src\pages\Layout\index.tsx</code> 中配置 4 个页面的路由</li></ol><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">// ...代码省略</span></span>
<span class="line"><span style="color:#A6ACCD;">export default function Layout() {</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  // ...代码省略</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">  return (</span></span>
<span class="line"><span style="color:#A6ACCD;">    &lt;div className={styles.root}&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      {/* 区域一：点击按钮切换显示内容的区域 */}</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;div className=&#39;tab-content&#39;&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">       &lt;Outlet /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      &lt;/div&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="loading-组件封装" tabindex="-1">Loading 组件封装 <a class="header-anchor" href="#loading-组件封装" aria-label="Permalink to &quot;Loading 组件封装&quot;">​</a></h2><blockquote><p>目标：封装一个通用的 Loading 加载动画组件。</p></blockquote><ul><li>新建组件：<code>src\components\Loading\index.tsx</code>，并添加以下代码：</li></ul><div class="language-diff line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">diff</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">// 🔔注意：引入组件命名冲突可通过 as 改名</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">import { Loading as AntdLoading } from &#39;antd-mobile&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">export default function Loading() {</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  return (</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">    &lt;div</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      style={{</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">        fontSize: 20,</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">        height: &#39;80vh&#39;,</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">        display: &#39;flex&#39;,</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">        justifyContent: &#39;center&#39;,</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">        alignItems: &#39;center&#39;,</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">        flexDirection: &#39;column&#39;,</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      }}</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">    &gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">      &lt;AntdLoading /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">    &lt;/div&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">  )</span></span>
<span class="line"><span style="color:#89DDFF;">+</span><span style="color:#C3E88D;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h1 id="其他页面路由配置" tabindex="-1">其他页面路由配置 <a class="header-anchor" href="#其他页面路由配置" aria-label="Permalink to &quot;其他页面路由配置&quot;">​</a></h1><blockquote><p>目标：创建本项目中将要开发的各个页面组件，并配置路由。</p><p>说明：这些页面是除了 <code>TabBar</code> 底部导航栏上的 4 个页面以外的其他功能页</p><p><strong>【本章节所做的事，你也可以不一次性做完，可以一个一个页面边开发边配置】</strong></p></blockquote><h2 id="页面组件参考" tabindex="-1">页面组件参考 <a class="header-anchor" href="#页面组件参考" aria-label="Permalink to &quot;页面组件参考&quot;">​</a></h2><ol><li>创建以下页面组件：</li></ol><div class="language-markdown line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">markdown</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> 搜索页面：src/pages/Search/index.tsx</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> 搜索结果页面：src/pages/Search/Result/index.tsx</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> 文章详情页面：src/pages/Article/index.tsx</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> 个人信息编辑页面：src/pages/Profile/Edit/index.tsx</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> 用户反馈页面：src/pages/Profile/Feedback/index.tsx</span></span>
<span class="line"><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> 机器人客服聊天页面：src/pages/Profile/Chat/index.tsx</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>当前，这些组件的代码使用最简单的即可，如：</p><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Search</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">搜索页面</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">&gt;;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="路由配置参考" tabindex="-1">路由配置参考 <a class="header-anchor" href="#路由配置参考" aria-label="Permalink to &quot;路由配置参考&quot;">​</a></h2><ol start="2"><li>在根组件 <code>App</code> 中，配置以上页面的路由：</li></ol><div class="language-jsx line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">jsx</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> ProfileEdit </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./pages/Profile/Edit</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// ...</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> App </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;">  </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> (</span></span>
<span class="line"><span style="color:#F07178;">    </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Router</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Routes</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span><span style="color:#676E95;font-style:italic;">/* ... */</span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">{</span><span style="color:#676E95;font-style:italic;">/* 不使用 tab 布局的界面 */</span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Route</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">path</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">/profile/edit</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">element</span><span style="color:#89DDFF;">={&lt;</span><span style="color:#FFCB6B;">ProfileEdit</span><span style="color:#89DDFF;"> /&gt;} /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">      </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#FFCB6B;">Routes</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#FFCB6B;">Router</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;">  )</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div></div></div></main><footer class="VPDocFooter" data-v-e9631fd0 data-v-face870a><!--[--><!--]--><div class="edit-info" data-v-face870a><!----><div class="last-updated" data-v-face870a><p class="VPLastUpdated" data-v-face870a data-v-149a99df>更新: <time datetime="2023-08-31T13:50:55.000Z" data-v-149a99df></time></p></div></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter" data-v-99cf8a88 data-v-f4388a15><div class="container" data-v-f4388a15><p class="message" data-v-f4388a15>Released under the MIT License.</p><p class="copyright" data-v-f4388a15>Copyright © 2022-present Shugang Zhou 传智教育</p></div></footer><!--[--><!--]--></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"d89339df\",\"electron_eletron.md\":\"f78b205d\",\"hmzs_前台可视化_04-部署上线说明.md\":\"b689f494\",\"geek-park_03-布局容器.md\":\"f9a95023\",\"hmzs_前台可视化_03-接入微前端.md\":\"e4e73fe1\",\"geek-park_index.md\":\"274ee860\",\"hr_day01-项目介绍及初始化-登录页面.md\":\"a87e2d0f\",\"hmzs_前台可视化_01-项目环境搭建.md\":\"7fa65aa4\",\"hr_day02-登录模块-主页鉴权.md\":\"7c74ca95\",\"geek-park_02-登录页面.md\":\"6ab1a2cf\",\"memory.md\":\"22cd8c53\",\"mini-rabbit_01-项目.md\":\"3c3d7316\",\"geek-park_01-项目准备.md\":\"23a5f83b\",\"hr_day10-首页图表-nginx上线.md\":\"8a2d49ab\",\"other-resource_index.md\":\"e64d1d24\",\"mini-rabbit_04-分类.md\":\"26f22ed4\",\"interview_面经pc端02.md\":\"88e355b4\",\"hr_day05-组织架构-角色管理.md\":\"bef256c2\",\"hr_day08-cos上传和权限数据.md\":\"c03b8bcb\",\"hr_day03-主页模块-修改密码.md\":\"bc380dd0\",\"mini-rabbit_index.md\":\"9e57a010\",\"hr_day04-组织架构.md\":\"e838901c\",\"hmzs_前台可视化_02-大屏可视化.md\":\"98a26e50\",\"mini-rabbit_09-购物车.md\":\"0a823f26\",\"pinia_index.md\":\"e132c8fe\",\"ts_pro.md\":\"fe9a6545\",\"hr_day06-角色管理-员工管理.md\":\"beb02c6b\",\"mini-rabbit_03-推荐.md\":\"faed0355\",\"mini-rabbit_06-地址.md\":\"1fc49004\",\"interview_面经h5端02.md\":\"a7342342\",\"mini-rabbit_08-sku.md\":\"0775a2c7\",\"ts_backup.md\":\"55f33e6d\",\"hr_day07-员工管理-上传下载.md\":\"dea880ea\",\"vue2_base.md\":\"b804c94a\",\"project_super-doctor.md\":\"f0b1af73\",\"interview_面经h5端01.md\":\"e9040838\",\"geek-park_04-个人中心.md\":\"f16a09df\",\"ts_case.md\":\"7cd17957\",\"vue3_index.md\":\"5e17a031\",\"interview_面经pc端01.md\":\"d7141b56\",\"ts_index.md\":\"a01dfcff\",\"vue3_case.md\":\"d48addba\",\"project_login.md\":\"c54c8b93\",\"project_index.md\":\"6674c051\",\"mini-rabbit_02-首页.md\":\"299b4f8e\",\"project_end.md\":\"cb143198\",\"vue2_vuex.md\":\"a087fc79\",\"ts_advanced.md\":\"319200c0\",\"ts_core.md\":\"fb357910\",\"project_home.md\":\"86083086\",\"project_user.md\":\"c888dc36\",\"vue3_composition.md\":\"72ec4356\",\"mini-rabbit_07-详情.md\":\"1fe593a3\",\"mini-rabbit_10-订单.md\":\"732bea0a\",\"project_consult.md\":\"44bd936e\",\"project_room.md\":\"e43da8e9\",\"mini-rabbit_05-登录.md\":\"0cae2bde\",\"project_order.md\":\"8793ea0c\",\"project_consult-order.md\":\"8f1e59fa\",\"hr_day09-权限应用-首页.md\":\"4ca0b809\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"优医问诊H5\",\"description\":\"最新Vue3技术栈,Vue3,TS,Pinia,Vant,在线问诊项目,H5\",\"base\":\"/hm-docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo2.png\",\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"vue2\",\"link\":\"/vue2/base\"},{\"text\":\"vuex\",\"link\":\"/vue2/vuex\"},{\"text\":\"面经\",\"link\":\"/interview/面经H5端01\"},{\"text\":\"人资\",\"link\":\"/hr/Day01-项目介绍及初始化-登录页面\"},{\"text\":\"黑马智数\",\"link\":\"/hmzs/前台可视化/01-项目环境搭建\"},{\"text\":\"小兔鲜儿\",\"link\":\"/mini-rabbit/\"},{\"text\":\"TypeScript\",\"link\":\"/ts/\"},{\"text\":\"Vue3\",\"link\":\"/vue3/\"},{\"text\":\"Pinia\",\"link\":\"/pinia/\"},{\"text\":\"优医问诊\",\"link\":\"/project/\"},{\"text\":\"其它\",\"link\":\"/other-resource/\"}],\"sidebar\":{\"/vu2/\":[{\"text\":\"vue基础\",\"items\":[{\"text\":\"vue基础\",\"link\":\"/vu2/base\"}]}],\"/interview/\":[{\"text\":\"面经H5\",\"items\":[{\"text\":\"面经H5端-（上）\",\"link\":\"/interview/面经H5端01\"},{\"text\":\"面经H5端-（下）\",\"link\":\"/interview/面经H5端02\"},{\"text\":\"面经PC端-（上）\",\"link\":\"/interview/面经PC端01\"},{\"text\":\"面经PC端-（下）\",\"link\":\"/interview/面经PC端02\"}]}],\"/hr/\":[{\"text\":\"面经H5\",\"items\":[{\"text\":\"Day01\",\"link\":\"/hr/Day01-项目介绍及初始化-登录页面\"},{\"text\":\"Day02\",\"link\":\"/hr/Day02-登录模块-主页鉴权\"},{\"text\":\"Day03\",\"link\":\"/hr/Day03-主页模块-修改密码\"},{\"text\":\"Day04\",\"link\":\"/hr/Day04-组织架构\"},{\"text\":\"Day05\",\"link\":\"/hr/Day05-组织架构-角色管理\"},{\"text\":\"Day06\",\"link\":\"/hr/Day06-角色管理-员工管理\"},{\"text\":\"Day07\",\"link\":\"/hr/Day07-员工管理-上传下载\"},{\"text\":\"Day08\",\"link\":\"/hr/Day08-Cos上传和权限数据\"},{\"text\":\"Day09\",\"link\":\"/hr/Day09-权限应用-首页\"},{\"text\":\"Day10\",\"link\":\"/hr/Day10-首页图表-Nginx上线\"}]}],\"/hmzs/\":[{\"text\":\"黑马智数\",\"items\":[{\"text\":\"初始化项目\",\"link\":\"/hmzs/前台可视化/01-项目环境搭建\"},{\"text\":\"大屏可视化\",\"link\":\"/hmzs/前台可视化/02-大屏可视化\"},{\"text\":\"接入微前端\",\"link\":\"/hmzs/前台可视化/03-接入微前端\"},{\"text\":\"部署上线\",\"link\":\"/hmzs/前台可视化/04-部署上线说明\"}]}],\"/mini-rabbit/\":[{\"text\":\"小兔仙\",\"items\":[{\"link\":\"/mini-rabbit/01-项目\",\"text\":\"01-项目准备\"},{\"link\":\"/mini-rabbit/02-首页\",\"text\":\"02-首页模块\"},{\"link\":\"/mini-rabbit/03-推荐\",\"text\":\"03-推荐模块\"},{\"link\":\"/mini-rabbit/04-分类\",\"text\":\"04-分类模块\"},{\"link\":\"/mini-rabbit/05-登录\",\"text\":\"05-登录模块\"},{\"link\":\"/mini-rabbit/06-地址\",\"text\":\"06-地址模块\"},{\"link\":\"/mini-rabbit/07-详情\",\"text\":\"07-详情模块\"},{\"link\":\"/mini-rabbit/08-SKU\",\"text\":\"08-SKU模块\"},{\"link\":\"/mini-rabbit/09-购物车\",\"text\":\"09-购物车模块\"},{\"link\":\"/mini-rabbit/10-订单\",\"text\":\"10-订单模块\"}]}],\"/memory/\":[{\"text\":\"需要记忆的内容\",\"items\":[{\"link\":\"/memory/\",\"text\":\"需要记忆的内容\"}]}],\"/ts/\":[{\"text\":\"TypeScript\",\"items\":[{\"text\":\"TypeScript起步\",\"link\":\"/ts/\"},{\"text\":\"TypeScript核心\",\"link\":\"/ts/core\"},{\"text\":\"TypeScript进阶\",\"link\":\"/ts/advanced\"},{\"text\":\"TypeScript应用\",\"link\":\"/ts/pro\"},{\"text\":\"TS黑马头条案例\",\"link\":\"/ts/case\"}]}],\"/vue3/\":[{\"text\":\"Vue3核心\",\"items\":[{\"text\":\"快速开始\",\"link\":\"/vue3/\"},{\"text\":\"组合式API\",\"link\":\"/vue3/composition\"},{\"text\":\"综合案例\",\"link\":\"/vue3/case\"}]}],\"/pinia/\":[{\"text\":\"Pinia\",\"items\":[{\"text\":\"Pinia 核心\",\"link\":\"/pinia/\"}]}],\"/project/\":[{\"text\":\"优医问诊H5项目课程\",\"items\":[{\"text\":\"1. 项目起步\",\"link\":\"/project/\"},{\"text\":\"2. 登录模块\",\"link\":\"/project/login\"},{\"text\":\"3. 用户模块\",\"link\":\"/project/user\"},{\"text\":\"4. 首页模块\",\"link\":\"/project/home\"},{\"text\":\"5. 极速问诊\",\"link\":\"/project/consult\"},{\"text\":\"6. 医生问诊室\",\"link\":\"/project/room\"},{\"text\":\"7. 问诊订单模块\",\"link\":\"/project/consult-order\"},{\"text\":\"8. 药品订单模块\",\"link\":\"/project/order\"},{\"text\":\"9. 其他扩展\",\"link\":\"/project/end\"},{\"text\":\"辅助-超级医生\",\"link\":\"/project/super-doctor\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/luckybo0027\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2022-present Shugang Zhou 传智教育\"},\"lastUpdatedText\":\"更新\",\"outline\":\"deep\"},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
    
  </body>
</html>